<template>
  <el-dialog
    :title="`${add ? '新增' : '编辑'}${type == 1 ? '入库记录' : '出库记录'}`"
    :visible.sync="dialogVisible"
    width="90%"
    top="5vh"
    append-to-body
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="ware-edit-from"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="物料编码" prop="materialCode">
            <el-input v-model="form.materialCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料类型" prop="materialTypeName">
            <el-input v-model="form.materialTypeName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号" prop="spec">
            <el-input v-model="form.spec" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计量单位" prop="unitName">
            <el-input v-model="form.unitName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="type == 1 ? `进场单号` : '出场单号'"
            prop="code"
          >
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="type == 1 ? `进场日期` : '出场日期'"
            prop="enterTime"
          >
            <el-date-picker
              style="width: 100%"
              v-model="form.enterTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家" prop="issueUnitName">
            <el-input v-model="form.issueUnitName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产批号" prop="batchNumber">
            <el-input v-model="form.batchNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用途" prop="materialUsage">
            <el-input v-model="form.materialUsage" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            :label="type == 1 ? `入库数` : '出库数'"
            prop="actualCount"
          >
            <el-input-number v-model="form.actualCount" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="进场图片" prop="EnterRef">
            <ImageUpload ref="EnterRef"></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合格证" prop="checkResult">
            <el-upload
              :action="uploadFileUrl"
              :file-list="fileList"
              :limit="20"
              :on-error="handleUploadError"
              :on-exceed="handleExceed"
              :on-success="handleUploadSuccess"
              :headers="headers"
              class="upload-file-uploader"
              ref="upload"
            >
              <!-- 上传按钮 -->
              <el-button size="mini" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="收货人" prop="consignee">
        <el-input v-model="form.consignee" />
      </el-form-item> -->
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { inMaterial, outMaterial } from "@/api/materialEnter";
import ImageUpload from "@/components/ImageUpload/index.vue";
import { getToken } from "@/utils/auth";

export default {
  components: { ImageUpload },
  data() {
    return {
      obj: null,
      add: true,
      type: 1,
      form: {
        id: "",
        actualCount: 0,
      },
      rules: {
        enterTime: [
          { required: true, message: "请输入进场时间", trigger: "blur" },
        ],
        actualCount: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      uploadFileUrl:
        process.env.VUE_APP_BASE_API + "/steel-arch/client/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
    };
  },
  methods: {
    // 文件个数超出
    handleExceed() {
      this.$message.error(`只允许上传20个文件`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$message.error('上传失败, 请重试');
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      console.log(res,file)
      this.$message.success('上传成功');
      this.form.qualificationLink = JSON.stringify(file);
    },
    // 删除文件
    handleDelete(index) {
      //this.fileList.splice(index, 1);
    },
    handleClose() {
      this.$refs.form.resetFields();
      this.row = null;
      this.dialogVisible = false;
    },
    openHandle(obj) {
      this.type = obj.type;
      this.add = obj.add;
      if (obj.editForm) {
        this.form = obj.editForm;
        obj.editForm.qualificationLink?this.fileList = [JSON.parse(obj.editForm.qualificationLink)]:''
        // console.log(obj.editForm)
      } else {
        
        this.form = {
          materialName: obj.parent.materialName,
          materialCode: obj.parent.materialCode,
          materialTypeName: obj.parent.materialTypeName,
          spec: obj.parent.spec,
          unitName: obj.parent.unitName,
          qualificationLink:obj.parent.qualificationLink?JSON.parse(obj.parent.qualificationLink):''
        };
        this.form.id = undefined;
      }
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.type == 1 && !this.add && obj.editForm) {
          // this.$refs.StandardRef.setUrl(obj.editForm.qualificationLink);
          this.$refs.EnterRef.setUrl(obj.editForm.imageLink);
        } else {
          // this.$refs.StandardRef.setUrl("");
          this.$refs.EnterRef.setUrl("");
        }
      });

      if (this.type == 2) {
        this.rules.enterTime = [
          { required: true, message: "请输入出场时间", trigger: "blur" },
        ];
      }
      this.obj = obj;
    },
    submitHandle() {
      let method = undefined;
      if (this.type === 1) {
        method = inMaterial;
      } else {
        method = outMaterial;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          const submitParam = { ...this.form };
          if (this.type == 1) {
            // submitParam.qualificationLink = this.$refs.StandardRef.getUrl();
            submitParam.imageLink = this.$refs.EnterRef.getUrl();
          }
          let message = `${this.add ? "新增" : "编辑"}${
            this.type == 1 ? "入库记录" : "出库记录"
          }`;
          method(submitParam).then((res) => {
            const { success,errorMsg } = res;
            if (success) {
              this.$message.success(`${message}成功`);
              this.$emit("submit");
              this.dialogVisible = false;
            } else {
              this.$message.error(`${message}失败，${errorMsg}`);
            }
          });
        }
      });
    },
  },
};
</script>
<style>
.ware-edit-from {
  height: 75vh;
  overflow: auto;
   /* 针对Webkit内核的浏览器 */
   &::-webkit-scrollbar {
        /* 设置滚动条的宽度 */
        width: 8px;
      }

      /* 滚动条轨道 - 背景颜色/白底 */
      &::-webkit-scrollbar-track {
        background: #F5F7FA;
        border-radius: 10px;
      }

      /* 滚动条的滑块部分 */
      &::-webkit-scrollbar-thumb {
        background: #C0C4CC;
        border-radius: 10px;
      }

      /* 当鼠标悬停在滚动条滑块上时改变颜色 */
      &::-webkit-scrollbar-thumb:hover {
        background: #C0C4CC;
      }
}
</style>
